import * as React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import searchEngine from './js/util/searchEngine.js';
import { useSelector, useDispatch } from 'react-redux';
import * as store from './reducers/partsSlice';
export default function SearchEngineSet(props) {
  const dispatch = useDispatch();
  const search_engine = useSelector((state) => state.search_engine);
  console.log(search_engine);
  let options = [];
  let search;
  let i = 0;
  const onChange = e => {
    dispatch(store.partsSlice.actions.SEARCH_ENGINE(e.target.value));
  };
  for (search in searchEngine.searchEngines) {
    options.push(
      <option value={searchEngine.searchEngines[search].name} key={i}>
        {searchEngine.searchEngines[search].name}
      </option>
    );
    i += 1;
  }
  let search_el = (
    <select
      onChange={onChange}
      defaultValue={search_engine}
      id="default-search-engine"
      name="defaultSearchEngine"
    >
      {options}
    </select>
  );
  return (
    <div id="search-engine-settings-container">
      <h3>Search Engine</h3>
      <div >
        <label
          htmlFor="defaultSearchEngine"
        >Choose a default search engine:</label>
        {search_el}
        <div
          style={{ paddingTop: '0.4em' }}
        >Set DuckDuckGo as the default search engine to see instant answers in the searchbar.</div>
      </div>
    </div>
  );
}
// export default function BasicSelect(props) {
//   const [age, setAge] = React.useState(props.value);

//   const handleChange = (event) => {
//     setAge(event.target.value);
//     if(props.onChange)    props.onChange(event.target.value);
//   };
//   let menuitems=[]
//   let index=0
//   for( let one in searchEngine.searchEngines){
//     console.log(one)
//     one=""+one
//     console.log(one)
//     menuitems.push(<MenuItem key={index} value={one}>{one}</MenuItem>)
//     index+=1;
//   }
//   console.log(menuitems)
//   return (
//     <Box sx={{ minWidth: 120 }}>
//       <FormControl fullWidth>
//         <InputLabel id="demo-simple-select-label">search engine</InputLabel>
//         <Select style={{...props.style,height:"100px"}}
//           labelId="demo-simple-select-label"
//           id="demo-simple-select"
//           value={age}
//           label="search engine"
//           onChange={handleChange}
//         >
//           {menuitems}
//         </Select>
//       </FormControl>
//     </Box>
//   );
// }